// src/pages/Account/Password/index.tsx
import { PageContainer } from '@ant-design/pro-components';
import { ProForm, ProFormText } from '@ant-design/pro-components';
import { message } from 'antd';
import { history } from 'umi';
import { createStyles } from 'antd-style';
import type { Rule } from 'rc-field-form/lib/interface';
import { dyCpsFixedPassword } from '@/services/ant-design-pro/api';

// 密码复杂度正则（至少包含字母、数字，8-20位）
const PASSWORD_REGEX = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{6,20}$/;
const useStyles = createStyles(({ token }) => {
  return {
    action: {
      marginLeft: '8px',
      color: 'rgba(0, 0, 0, 0.2)',
      fontSize: '24px',
      verticalAlign: 'middle',
      cursor: 'pointer',
      transition: 'color 0.3s',
      '&:hover': {
        color: token.colorPrimaryActive,
      },
    },
    lang: {
      width: 42,
      height: 42,
      lineHeight: '42px',
      position: 'fixed',
      right: 16,
      borderRadius: token.borderRadius,
      ':hover': {
        backgroundColor: token.colorBgTextHover,
      },
    },
    container: {
      display: 'flex',
      flexDirection: 'column',
      height: '100vh',
      overflow: 'auto',
      backgroundImage:
        "url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr')",
      backgroundSize: '100% 100%',
    },
  };
});
export default () => {
  const { styles } = useStyles();
  // 提交处理
  const handleSubmit = async (values: any) => {
    try {
      // 这里替换为实际 API 调用
      const rsp = await dyCpsFixedPassword(values);
      if(rsp.code === "SUCCESS") {
        message.success('密码修改成功！');
        history.push('/user/login'); // 成功后跳转到登录页
      } else {
        message.error(rsp.msg);
      }

      
    } catch (error) {
      message.error('密码修改失败，请检查输入');
    }
  };

  // 确认密码校验规则
  const confirmPwdRules: Rule[] = [
    ({ getFieldValue }) => ({
      validator(_, value) {
        if (!value || getFieldValue('newPassword') === value) {
          return Promise.resolve();
        }
        return Promise.reject(new Error('两次输入的密码不一致！'));
      },
    }),
  ];

  return (
    <div className={styles.container}>
       <div
        style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          flexDirection: "column",
          padding: '32px 0',
        }}
      >
    <PageContainer title="修改密码" ghost>
      <ProForm
        layout="horizontal"
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 12 }}
        submitter={{
          resetButtonProps: { style: { display: 'none' } },
          submitButtonProps: { style: { width: '100%' } },
        }}
        onFinish={handleSubmit}
      >
        <ProFormText.Password
          name="oldPassword"

          width="md"
          label="原密码"
          placeholder="请输入当前使用的密码"
          rules={[
            { required: true, message: '请输入原密码' },
            { min: 6, message: '密码至少8位' }
          ]}
        />

        <ProFormText.Password
          name="newPassword"
          width="md"
          label="新密码"
          placeholder="6-20位，需包含字母和数字"
          rules={[
            { required: true, message: '请输入新密码' },
            { pattern: PASSWORD_REGEX, message: '必须包含字母和数字且6-20位' }
          ]}
        />

        <ProFormText.Password
          name="confirmPassword"
          width="md"
          label="确认密码"
          placeholder="请再次输入新密码"
          rules={[
            { required: true, message: '请确认新密码' },
            ...confirmPwdRules
          ]}
        />
      </ProForm>
    </PageContainer>
    </div>
    </div>
  );
};